<template>
    <div id="search">
        <h2>搜索</h2>
        <div class="header">
            <input type="text" placeholder="搜索商家、商品名称" v-model="inputText">
            <span @click="add()">搜索</span>
        </div>
        <div class="main">
            <h3>历史搜索</h3>
            <span v-for="(item, index) in arr" :key="index">{{ item }}</span>
        </div>
        <div class="footer">
            <h3>搜索发现</h3>
            <span v-for="(item, index) in arrSearch" :key="index">{{ item }}</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            inputText: '',
            arr: [],
            arrSearch: [
                '麻辣烫', '米线', '披萨', '蛋糕', '汉堡', '腊八粥', '烤肉拌饭', '炸鸡', '味多美(庆阳路店)', '好饿啊']
        }
    },
    methods: {
        add() {
            if (this.inputText) {
                this.arr.push(this.inputText);
                this.inputText = "";
            }
        }
    }
}
</script>

<style lang="scss" scoped>
h2 {
    margin: 10px;
}

.header {
    display: flex;
    align-items: center;
}

.header input {
    flex: 1;
    margin: 10px;
    padding-left: 10px;
    height: 40px;
    background: #f5f5f5;
    border: none;
    outline: none;
    border-radius: 20px;
}

.header span {
    width: 60px;
    margin: 10px;
    font-size: 24px;
    color: rgb(37, 92, 186);
}

h3 {
    margin: 10px;
}

.main span {
    margin: 8px;
    display: inline-block;
    background: rgb(210, 208, 208);
    padding: 5px;
    border-radius: 5px;
}

.footer span {
    margin: 6px;
    display: inline-block;
    background: rgb(187, 187, 187);
    padding: 5px;
    border-radius: 5px;
}
</style>